<template>
	<el-dialog title="选择人员" :visible.sync="visible" append-to-body width="992px">
		<div class="sw_select_user">
			<div class="query_user_wrapper">
				<el-form size="mini" inline>
					<el-form-item><el-input v-model="queryUser.account" clearable placeholder="用户账号" style="width: 180px"></el-input></el-form-item>
					<el-form-item><el-input v-model="queryUser.userName" clearable placeholder="用户姓名" style="width: 180px"></el-input></el-form-item>
					<el-form-item>
						<el-select v-model="queryUser.type" clearable placeholder="用户类型" style="width: 100px">
							<el-option v-for="(item, index) in dictEnums['USER_TYPE']" :label="item.msg" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="queryUser.sex" clearable placeholder="用户性别" style="width: 100px">
							<el-option v-for="(item, index) in dictEnums['USER_SEX']" :label="item.msg" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button type="primary" @click="queryUserData">查询</el-button></el-form-item>
				</el-form>
				<el-checkbox-group class="list" v-model="checkedUser" v-loading="loading">
					<el-checkbox v-for="(item, index) in userListData" :key="index" :label="item.id">
						<el-avatar :size="64" :src="squareUrl"></el-avatar>
						<h4>{{ item.userName }}</h4>
					</el-checkbox>
				</el-checkbox-group>
				<div class="page">
					<sw-pagination :total="dataCount" :page-sizes="queryPages" :page.sync="queryUser.page" :limit.sync="queryUser.limit" @change="queryUserData"></sw-pagination>
				</div>
			</div>
			<div class="select_user_wrapper">
				<div class="list">
					<div class="item" v-for="(item, index) in checkedUserList" :key="index">
						<el-avatar size="medium" shape="square" :src="squareUrl"></el-avatar>
						<h4>{{ item.userName }}</h4>
						<el-button size="medium" type="text" icon="el-icon-delete" @click="handleDeleteUser(item)"></el-button>
					</div>
				</div>
				<div class="button">
					<el-button size="small" @click="visible = false">取消</el-button>
					<el-button size="small" type="primary" :loading="btnLoading" @click="handleSubmitUser">确定</el-button>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { getUserList } from '@/api/system/tbSysUser';
import { batchAddLibMember } from '@/api/data/tbNetPower';
export default {
	props: {
		value: { type: Boolean, default: false },
		roleId: { type: String, default: '' }
	},
	inject: ['getLibId'],
	data() {
		return {
			isFirst: true,
			loading: false,
			visible: this.value,
			dataCount: 0,
			queryUser: { page: 1, limit: 32 },
			queryPages: [32, 64, 128],
			squareUrl: require('@/assets/img/avatar_image.png'),
			userListData: [],
			checkedUser: [],
			btnLoading: false,
			userTotalData: []
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		libId() {
			return this.getLibId();
		},
		checkedUserList() {
			return this.checkedUser.map((item) => {
				return this.userTotalData.find((n) => n.id === item);
			});
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.checkedUser = [];
			await this.getUserData();
		}
	},
	mounted() {
		console.log(this.libId);
	},
	methods: {
		//获取用户列表
		async getUserData() {
			let params = { ...this.queryUser };
			let result = await getUserList(params).then((res) => res.data);
			this.isFirst = false;
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.userListData = result.data || [];
				this.userTotalData = [...this.userTotalData, ...this.userListData];
			}
		},

		queryUserData() {
			this.loading = true;
			this.getUserData();
		},

		//删除选中用户
		handleDeleteUser(data) {
			let index = this.checkedUser.findIndex((item) => item.id === data.id);
			this.checkedUser.splice(index, 1);
		},

		//提交选中用户
		async handleSubmitUser() {
			let params = {
				dirId: this.libId,
				roleId: this.roleId,
				userList: this.checkedUser.map((item) => ({ relId: item, type: 1 }))
			};
			this.btnLoading = true;
			await this.addedLibMemberRequest(params);
			this.btnLoading = false;
		},

		//添加库成员请求
		async addedLibMemberRequest(params) {
			let result = await batchAddLibMember(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('添加库成员成功');
				this.visible = false;
				this.$emit('refresh');
			} else {
				this.$message.error('添加库成员失败');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_select_user {
	display: flex;
	height: calc(70vh - 95px);
	width: calc(100% + 30px);
	margin: -15px;
	overflow: hidden;
}
.query_user_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.el-form {
		padding: 10px;
		flex-shrink: 0;
		.el-input {
			display: flex;
		}
	}
	.el-form-item {
		margin-bottom: 0;
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
	}
	.list {
		flex: 1;
		border-top: solid 1px #e4e7ed;
		padding: 10px 0 0;
		overflow: auto;
	}
	.el-checkbox {
		float: left;
		width: 64px;
		padding: 8px;
		margin: 0;
		font-weight: normal;
		overflow: hidden;
		border-radius: 4px;
		margin: 0 0 10px 10px;
		border: solid 1px transparent;
		&:hover {
			background-color: var(--primary-background-hover);
		}
		&.is-checked {
			border-color: var(--primary-border-active);
			background-color: var(--primary-background-hover);
		}
		h4 {
			height: 14px;
			line-height: 1;
			margin-top: 6px;
			text-align: center;
			overflow: hidden;
			font-weight: normal;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.el-checkbox__input {
		display: none;
	}
	.el-checkbox__label {
		padding: 0;
	}
	.page {
		padding: 12px;
		border-top: solid 1px #e4e7ed;
	}
}
.select_user_wrapper {
	display: flex;
	flex-direction: column;
	width: 240px;
	flex-shrink: 0;
	border-left: solid 1px #e4e7ed;
	.list {
		flex: 1;
		padding: 4px 0;
		overflow: auto;
		border-bottom: solid 1px #e5e5e5;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 6px 10px;
		.el-avatar {
			flex-shrink: 0;
		}
		h4 {
			flex: 1;
			font-size: 14px;
			margin-left: 10px;
			overflow: hidden;
		}
		.el-button {
			flex-shrink: 0;
		}
		.el-button {
			flex-shrink: 0;
		}
	}
	.button {
		padding: 10px;
		text-align: right;
	}
}
</style>
